<script setup lang="ts">
import { useAppStore } from '../stores'

// 获取应用设置状态
const appStore = useAppStore()
</script>

<template>
  <div class="container mx-auto p-4">
    <h1 class="text-2xl font-bold mb-4">关于页面</h1>
    
    <div class="bg-white rounded-lg shadow p-6">
      <p class="mb-4">这是一个使用Vue3全家桶构建的项目</p>
      <p class="mb-2">当前主题: {{ appStore.theme }}</p>
      <p class="mb-4">当前语言: {{ appStore.language }}</p>
      
      <div class="mt-4">
        <button 
          @click="appStore.setTheme(appStore.theme === 'light' ? 'dark' : 'light')"
          class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 mr-2"
        >
          切换主题
        </button>
        
        <router-link 
          to="/" 
          class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
        >
          返回首页
        </router-link>
      </div>
    </div>
  </div>
</template>